<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE Template</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="userInfo.keyWord">
        <ul>
            <li v-for="p in filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>
</body>
    <script type="text/javascript">
        
        //#region 用watch实现
        // const vm = new Vue({
        //     el:'#root',
        //     data:function(){
        //         return{
        //             keyWord:'',
        //             persons:[
        //                 {id:'001',name:'马冬梅',age:18,sex:'女'},
        //                 {id:'002',name:'周冬雨',age:19,sex:'女'},
        //                 {id:'003',name:'周杰伦',age:20,sex:'男'},
        //                 {id:'004',name:'温兆伦',age:20,sex:'男'}
        //             ],
        //             filterPersons:[]
        //         }
        //     },
        //     watch:{
        //         keyWord:{
        //             immediate:true,
        //             handler(val){
        //                 this.filterPersons = this.persons.filter((p)=>{
        //                 return p.name.indexOf(val)!=-1;
        //             })
        //             }
        //             //console.log('keyword被修改:',val);
        //         }
        //     },
        //     methods:{
        //       showInfo(event){          
        //       }
        //   }
        // })
        //#endregion

        //#region  用computed实现
        const vm = new Vue({
            el:'#root',
            data:function(){
                return{
                    keyWord:'',
                    persons:[
                        {id:'001',name:'马冬梅',age:18,sex:'女'},
                        {id:'002',name:'周冬雨',age:19,sex:'女'},
                        {id:'003',name:'周杰伦',age:20,sex:'男'},
                        {id:'004',name:'温兆伦',age:20,sex:'男'}
                    ]       
                }
            },
            computed: {
                filterPersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord)!=-1;
                    })
                }
            },
            
        })
        //#endregion

        
    </script>
</html>